<template>
  <section class='f-update'>
    <van-form class="f-mt-14" @submit="onSubmit" input-align="right" error-message-align="right">
      <van-field v-model="form.shopName" name="shopName" label="店铺名称" placeholder="请输入店铺名称"
        :rules="[{ required: true, message: '请填写店铺名称' }]" />

      <van-field v-model="form.contactsName" name="contactsName" label="店铺联系人" placeholder="请输入店铺联系人"
        :rules="[{ required: true, message: '请填写店铺联系人' }]" />

      <div class="f-submit-btn">
        <van-button round block type="primary" native-type="submit">
          确定
        </van-button>
      </div>
    </van-form>
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { successDeal } from '@/utils/utils';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      form: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '修改店铺名称',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.form = res.data
      })
    }

    const onSubmit = () => {
      let json = {
        shopName: state.form.shopName,
        contactsName: state.form.contactsName,
        shopId: state.form.shopId,
      }
      api.shopModify(json).then(res => {
        successDeal('修改成功！')
        setTimeout(() => {
          router.go(-1)
        }, 1000)
      })
    }

    return {
      ...toRefs(state),
      onSubmit
    }
  }
}
</script>
<style lang='scss' scoped>
.f-update {
  .f-submit-btn {
    margin-top: 70px;
    padding: 0 62px;
  }
}
</style>